<template>
    <page ref="pageRef" title="超级玛特周年蛋糕" nav-color="transparent" light>
        <view>
            <image :src="resource.ex_bg" web class="bg" mode="aspectFill" />

            <red-packet v-if="caketType === 0 && isClick === 0" ref="redPacketRef" :cakeTotal="cakeTotal" :isEnd="isEnd" @open="getMoney" />
            <result v-if="isEnd === 1 && isClick === 1" ref="resultRef" />
            <materal v-if="caketType === 1" ref="materalRef" :caketType="caketType" @open="getMoney" />
            <activity-ends v-if="isEnd === 1 && caketType === 1" ref="activityEndsRef" />
        </view>
    </page>
</template>

<script>
import resource from '@/utils/resource'
import materal from './materal.vue'
import redPacket from './red_packet.vue'
import result from './result.vue'
import activityEnds from './activity_ends.vue'

export default {
    components: { materal, redPacket, result, activityEnds },
    data() {
        return {
            resource,
            caketType: 1, // 0 合成， 1 没合成
            cakeTotal: 0,
            isEnd: 0, // 0 没结束 1: 结束，
            isClick: 0 // 0 没有点击 1: 已点击，
        }
    },
    mounted() {
        this.getMoney()
    },
    methods: {
        async getMoney() {
            await this.$service.weal.expectedMoney().then((res) => {
                if (res.code === '0') {
                    this.caketType = res.data.isSynthesis
                    this.cakeTotal = res.data.synthesisNum
                    this.isEnd = res.data.isEnd
                    this.isClick = res.data.isClick
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 101vh;
}
</style>